<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>博客编辑页</title>
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/blog_edit.css" />
    <link rel="stylesheet" href="./css/default.css" />
    <!-- 引入富文本框依赖 -->
    <link rel="stylesheet" href="./kindeditor/themes/default/default.css" />
    <script src="./kindeditor/kindeditor-all.js"></script>
    <script src="./kindeditor/lang/zh-CN.js"></script>
  </head>
  <body>
    <!-- 导航栏 -->
    <div class="nav">
      <img src="image/log.png" alt="" />
      <span class="title">我的博客系统</span>
      <!-- 使用 span 把左右两侧的元素给撑开 -->
      <span class="spacer"></span>
      <a href="blog_list.html">主页</a>
      <a href="blog_edit.html">写博客</a>
      <a href="blog_login.html">注销</a>
    </div>
    <!-- 版心 -->
    <div class="blog-edit-container">
      <!-- 标题编辑区 -->
      <div class="title">
        <input type="text" placeholder="在这里写下文章标题" id="title" />
        <input type="button" value="发布文章" id="submit" />
      </div>
      <!-- 内容编辑区 -->
      <!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
      <textarea
        id="editor_id"
        name="content"
        style="width: 1000px; height: 600px"
      >
      </textarea>
    </div>
    <button id="huoqu">获取</button>
    <script>
      KindEditor.ready(function (K) {
        window.editor = K.create("#editor_id");
      });
      var options = {
        cssPath: "/css/index.css",
        filterMode: true,
      };

      var contents = document.querySelectorAll(".ke-content").children;
      // var zi = contents.childNodes();

      var huoqu = document.querySelector("#huoqu");
      huoqu.onclick = function () {
        console.dir(contents);
        console.log(contents.value);
        console.log(contents);
      };

      // var editor = K.create('textarea[name="content"]', options);
      // // 取得HTML内容
      // html = editor.html();

      // // 同步数据后可以直接取得textarea的value
      // editor.sync();
      // html = document.getElementById("editor_id").value; // 原生API
      // html = K("#editor_id").val(); // KindEditor Node API
      // html = $("#editor_id").val(); // jQuery

      // 设置HTML内容
      // editor.html("HTML内容");
      // console.log(html);
    </script>
  </body>
</html>
